<!-- 销售管理 -->
<template>
  <div class="navigation">
    <div class="navigation-content">
      <div class="flex-center">
        <div class="document">
          <div class="document-item" v-for="(item, index) in routeList[titleList[0]]" :key="index" @click="routeClick(item)">
            <img :src="titleToImage[item.title]" :alt="item.title" v-if="titleToImage[item.title]" />
            {{ item.title }}
          </div>
        </div>
      </div>
      <div class="query_statistics">
        <div class="query_statistics_title">相关查询统计</div>
        <div class="query_statistics_content">
          <div v-for="r,i in titleList" :key="i">
            <!-- {{ r }} -->
            <div v-if="i != 0" class="query_statistics_content_item" v-for="(item, index) in routeList[r]" :key="index" @click="routeClick(item)">
              <div class="yuan"></div>
              {{ item.title }}
            </div>
            <a-divider v-if="i != 0&&i !== titleList.length - 1" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import subMenu from '../../menu/Sidebar/submenu'
import { getAction } from '@/api/manage'
import Vue from 'vue'
import { handlePermissions, handlePagePermissions, handleOtherPerms } from '@/utils'
export default {
  components: {},
  name: 'saleMenu',
  props: {},
  watch: {
    '$store.getters.openAccountValue'(val) {
      this.openAccount = val
      if (val === 3) {
        this.isOpenAccount = true
      } else {
        this.isOpenAccount = false
      }
    },
  },
  data() {
    return {
      path: '/stock',
      routeList: [],
      titleList: [],
      dialogVisible: false,
      isOpenAccount: false, // 开账状态
      openAccount: 0, // 开账状态
      printPermissions: false, //打印模板设置权限
    }
  },
  computed: {
    cashPermissions() {
      return handlePermissions('现金银行统计表')
    },
    titleToImage() {
      return {
        '盘点单': require('@/assets/home/pdd-menu.png'),
        '调拨单': require('@/assets/home/dbd-menu.png'),
        '报损单': require('@/assets/home/bsd-menu.png'),
        '报溢单': require('@/assets/home/byd-menu.png'),
        '上下限设置': require('@/assets/home/sxssz-menu.png')
      };
    },
  },
  mounted() {
    this.printPermissions = handleOtherPerms('打印模板设置')
    this.openAccount = this.$store.getters.openAccountValue
    if (this.openAccount === 3) {
      this.isOpenAccount = true
    } else {
      this.isOpenAccount = false
    }
    let data = this.getMenuData()
    console.log('data',JSON.parse(JSON.stringify(data)))
    let tList = [] //第二层标题
    let rList = {} //第二次路径
    if (data && data.children && data.children.length > 0) {
      //配置数据
      for (let index = 0; index < data.children.length; index++) {
        const element = data.children[index]
        let title = element.meta.title
        tList.push(title)
        let children = element.children || []
        let cList = [] //存放第三层路径
        for (let i = 0; i < children.length; i++) {
          const e = children[i]
          if (!e.hidden) {
            cList.push({
              title: e.meta.title,
              path: e.path,
              icon: e.meta.icon,
            })
          }
        }
        rList[title] = cList
      }
      this.titleList = tList
      this.routeList = rList
    } else {
      //本地数据
      this.titleList = subMenu.routeMap[this.path].titles
      this.routeList = subMenu.routeMap[this.path]
    }
  },
  methods: {
    getMenuData() {
      let arr = this.$store.state.user.permissionList
      for (let index = 0; index < arr.length; index++) {
        const element = arr[index]
        if (element.path == this.path) {
          return element
        }
      }
    },
    routeClick(item) {
      // console.log('item.path', item.path)
      this.printPermissions = handleOtherPerms('打印模板设置')
      if (item.path == this.$route.path) {
        this.$emit('pathChange', 0)
        return
      }
      // 账套过期不允许进入其他页面
      if (Vue.ls.get('account-no-money')) {
        return this.$elMessage.warning('续费未完成不能操作!')
      }
      if (!this.isOpenAccount) {
        // 基本信息的资料都可以操作
        if (
          [
            '/initialAccountSetup',
            '/baseInfomation/material/commodityInfo',
            '/baseInfomation/material/transactionCompanyInfo',
            '/baseInfomation/material/staffInfo',
            '/baseInfomation/material/warehouseInfo',
            '/baseInfomation/material/logisticsInfo',
            '/baseInfomation/material/accountInfo',
          ].includes(item.path)
        ) {
          // 未选择开账不能进入基本信息页面
          if (this.openAccount === 0) {
            return this.$elMessage.warning('请先选择开账方式!')
          }
          return this.toPath(item)
        } else if (
          [
            '/baseInfomation/beginningOfPeriod/inventoryEntry',
            '/baseInfomation/beginningOfPeriod/arAndapEntry',
            '/baseInfomation/beginningOfPeriod/accountBalanceEntry',
          ].includes(item.path)
        ) {
          // 期初菜单需要处理
          if (this.openAccount === 0) {
            return this.$elMessage.warning('请先选择开账方式!')
          }
        } else {
          return this.$elMessage.warning('未开账不能操作!')
        }
      }
      if (
        [
          '/baseInfomation/printSetting/printSet',
          '/baseInfomation/printSetting/printSetRecord',
          '/baseInfomation/printSetting/printSetStatic',
          '/baseInfomation/printSetting/printSetStock',
          '/baseInfomation/printSetting/printSetSettlement',
          '/baseInfomation/printSetting/templateSet',
          '/baseInfomation/printSetting/library',
        ].includes(item.path) &&
        !this.printPermissions
      ) {
        return this.$elMessage.warning('未拥有打印模板设置权限！!')
      }
      // 现金银行统计表拦截是否有录入权限
      if (item.path == '/reportStatistics/financeReport/cashBankStatistics' && !this.cashPermissions.LuRu) {
        return this.$elMessage.warning('没有权限！')
      }
      const titleMappings = {
        '商品进销存明细表': '商品进销存表',
        '上下限设置': '库存上下限设置',
        // 在此处添加其他需要转换的标题映射
      };
      const permissionTitle = titleMappings[item.title] || item.title;
      //没有当前页面权限
      if (!handlePagePermissions(permissionTitle)) {
        return this.$elMessage.warning('没有权限！')
      }
      this.toPath(item)
    },
    toPath(item) {
      let path = item.path
      if (path == '/otherWarehouseType') {
        this.$emit('pathChange', 1)
      } else if (path == '/initialAccountSetup') {
        this.$emit('pathChange', 3)
      } else if (path == '/otherDeliveryType') {
        this.$emit('pathChange', 2)
      } else {
        this.$emit('pathChange', 0)
        this.$router.push(
          {
            path: item.path,
          },
          () => {},
          () => {}
        )
      }
    },
  },
}
</script>

<style lang="less" scoped>
.navigation {
  height: 100%;
  padding-bottom: 0.168761rem;

  .navigation-content {
    height: 100%;
    display: flex;
    gap: 16px;
    overflow: auto;

    .flex-center {
      flex: 4;
      padding: 24px;
      // flex: 1;
      // height: 100%;
      background-color: #dbdbdb;
      display: flex;
      justify-content: center;
      align-items: center;

      .document {
        width: 65%;
        width: 850px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 60px 40px; // 调整行列间距
        
        .document-item {
          cursor: pointer;
          width: 100%;
          height: 180px;
          background: white;
          border-radius: 8px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.08); // 添加投影
          font-size: 15px;
          color: #333;
          transition: all 0.2s;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          
          &:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
          }

          img {
            width: 60px;
            margin-bottom: 12px;
          }
        }
      }
    }

    /* 右侧统计列表区域 */
    .query_statistics {
      flex: 1;
      background: white;
      border-radius: 10px 10px 0px 0px;
      min-width: 250px; // 右侧区域的最小宽度

      .query_statistics_title {
        height: 56px;
        background: #FBA516 !important;
        border-radius: 10px 10px 0 0;
        font-size: 16px;
        font-weight: 600;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .query_statistics_content {
        margin-top: 40px;
        padding: 0 20px 0 30px;
        
        .query_statistics_content_item {
          cursor: pointer;
          height: 36px;
          font-size: 15px;
          color: #666;
          margin-bottom: 0;
          transition: all 0.2s;
          display: flex;
          align-items: center;
          
          &:hover {
            color: #FBA516;
            transform: translateX(4px);
          }

          .yuan {
            width: 10px;
            height: 10px;
            background: linear-gradient( 180deg, #FBAD19 0%, #FF6200 100%);
            border-radius: 50%;
            margin-right: 10px;
          }
        }

        /* 分割线样式 */
        .ant-divider {
          margin: 20px 0;
          background: #E8E8E8;
        }
      }
    }
  }
}
</style>
